<template>
  <div class="easy-container flex">
    <div class="cell shrink-0" style="padding-top: 3px; padding-right: 0;">
      <svg-icon :icon-name="stateIcon.icon" :style="`color: ${stateIcon.color};`" class="s18" />
    </div>
    <div class="cell flex-1">
      <router-link
        :to="`/spaces/${issue.space.id}/issues/${issue.id}`"
        class="hover-underline-box"
        style="overflow: hidden;"
      >
        <div class="m-b-4">
          <span class="title f-normal link hover-underline">{{ issue.title }}</span>
          <el-tag v-for="tag in issue.tags" :key="tag" size="mini">{{ tag }}</el-tag>
        </div>
        <div class="line2" v-html="$va.plainText(issue.content)"></div>
        <div class="info f-mini">
          {{ issue.author.nickname }}
          <timeago2 :date-time="issue.created_at" pre-text="创建于" />
        </div>
      </router-link>
      <router-link
        :to="`/spaces/${issue.space.id}`"
        class="info-deep f-mini-plus hover-underline block m-t-8"
      >所属空间：{{ issue.space.title }}</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'component-issues-list-item',
  props: {
    issue: Object,
  },
  computed: {
    stateIcon() {
      if (this.issue.solved) return { icon: 'issue-solved', color: '#67c23a' };
      return { icon: 'issue-open', color: '#e6a23c' };
    },
  },
};
</script>

<style></style>
